/*---------------------------------------------------------------------------------------------
*  Copyright (c) Microsoft Corporation. All rights reserved.
*  Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.table-explorer-custom-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background-color: var(--vscode-editor-background);
    border-top: 1px solid var(--vscode-panel-border);
    font-size: 13px;
    color: var(--vscode-foreground);
    user-select: none;
    flex-shrink: 0;
    margin-top: 0;
}

.table-explorer-custom-pagination .row-count-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.table-explorer-custom-pagination .row-count-selector .fui-Combobox {
    position: relative;
    z-index: 10;
}

.table-explorer-custom-pagination .row-count-selector .fui-Button {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    margin-left: 4px;
    z-index: 11;
    position: relative;
}

.table-explorer-custom-pagination .row-count-selector .row-count-label {
    color: var(--vscode-descriptionForeground);
    white-space: nowrap;
    font-size: 12px;
}

.table-explorer-custom-pagination .pagination-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-explorer-custom-pagination .pagination-count {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-explorer-custom-pagination .page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-explorer-custom-pagination .page-size-label {
    color: var(--vscode-descriptionForeground);
    white-space: nowrap;
    font-size: 12px;
}

.table-explorer-custom-pagination .page-from-to {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-explorer-custom-pagination .page-from-to .separator {
    color: var(--vscode-descriptionForeground);
}

.table-explorer-custom-pagination .total-items {
    font-weight: 500;
}

.table-explorer-custom-pagination .items-label {
    color: var(--vscode-descriptionForeground);
}

.table-explorer-custom-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-explorer-custom-pagination .pagination-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.table-explorer-custom-pagination .page-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

.table-explorer-custom-pagination .page-info .page-label,
.table-explorer-custom-pagination .page-info .separator {
    color: var(--vscode-descriptionForeground);
}

.table-explorer-custom-pagination .page-info .page-number {
    font-weight: 500;
    min-width: 20px;
    text-align: center;
}

.table-explorer-custom-pagination .page-info .page-count {
    min-width: 20px;
    text-align: center;
}

.table-explorer-custom-pagination .pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 3px;
    color: var(--vscode-icon-foreground);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.table-explorer-custom-pagination .pagination-button svg {
    width: 16px;
    height: 16px;
}

.table-explorer-custom-pagination .pagination-button:hover:not(:disabled) {
    background-color: var(--vscode-toolbar-hoverBackground);
}

.table-explorer-custom-pagination .pagination-button:active:not(:disabled) {
    background-color: var(--vscode-toolbar-activeBackground);
}

.table-explorer-custom-pagination .pagination-button:disabled {
    color: var(--vscode-disabledForeground);
    cursor: not-allowed;
    opacity: 0.4;
}

/* Constrain dropdown widths */
.table-explorer-custom-pagination .row-count-selector .fui-Dropdown,
.table-explorer-custom-pagination .row-count-selector .fui-Combobox {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.table-explorer-custom-pagination .row-count-selector .fui-Combobox > input {
    width: 100%;
}

.table-explorer-custom-pagination .page-size-selector .fui-Dropdown {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
}

/* Fix dropdown portal styling - target actual Fluent UI classes from DOM */
.fui-Listbox.fui-Dropdown__listbox {
    background-color: var(--vscode-dropdown-background);
    border: 1px solid var(--vscode-dropdown-border);
    box-shadow: var(--vscode-widget-shadow);
    z-index: 1000;
    min-width: 120px;
}

.fui-Option {
    background-color: var(--vscode-dropdown-background);
    color: var(--vscode-dropdown-foreground);
}

.fui-Option:hover {
    background-color: var(--vscode-list-hoverBackground);
    color: var(--vscode-list-hoverForeground);
}

.fui-Option[aria-selected="true"] {
    background-color: var(--vscode-list-activeSelectionBackground);
    color: var(--vscode-list-activeSelectionForeground);
}

/* Global fallback selectors for dropdown portals (covers both Dropdown and Combobox) */
div[role="listbox"][id^="fluent-listbox"] {
    background-color: var(--vscode-dropdown-background);
    border: 1px solid var(--vscode-dropdown-border);
    box-shadow: var(--vscode-widget-shadow);
    z-index: 1000;
    min-width: 120px;
}

div[role="option"][class*="fui-Option"] {
    background-color: var(--vscode-dropdown-background);
    color: var(--vscode-dropdown-foreground);
}

div[role="option"][class*="fui-Option"]:hover {
    background-color: var(--vscode-list-hoverBackground);
    color: var(--vscode-list-hoverForeground);
}

div[role="option"][class*="fui-Option"][aria-selected="true"] {
    background-color: var(--vscode-list-activeSelectionBackground);
    color: var(--vscode-list-activeSelectionForeground);
}
